You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
5:37Timeseries Chart
-
3:03XY Chart
-
3:26Bar Chart
-
3:59Pie Chart
-
3:16Simple Table
-
3:22CrossTab Table
Take Topic Challenge
LESSON
Pie Chart
Description
Let's go over the Report module's Pie Chart component
Video recorded using: Ignition 8.1
Resources
Transcript
(open in window)[00:00] Let's look at the last chart in this topic, the pie chart. I'm here again in the design tab for my report, and I'll drag and drop a pie chart onto it. Again, we'll need a data key to drive the charts data. You can see under the data sources within the key browser, I have this fruit data available. I'll drag that into my data key. Next, we need to specify a label key and a value key. The pie chart takes a data source with two keys, a label, which is typically a string and a corresponding value. Let's look at the data tab to see how my fruit data source is configured. We can see that fruit data is a simple static CSV with two columns, the fruit column being my label, which has strings of different fruits, and the quantity column, which has the amount or quantity of each fruit. Let's go back to the design tab and we'll select our pie chart. So I'll drag fruit into my label key, and then I'll drag quantity into my value key. We also have additional options in our configure section that we have seen before in the bar chart component video.
[01:08] You can change the segment colors or add additional segments. There's also a scripting event available to make any modifications to the chart before rendering. We'll leave these options alone for now. Let's take a look at the preview tab to see what our chart looks like. We very quickly created a simple pie chart and we can see our fruit label keys populating our legend. Now let's take a look at some of the properties on the pie chart. We'll switch back to the design tab and select our chart. Then we'll click on properties in the property inspector. I'll make this panel floating so it's a bit easier to see everything. You'll see under the pie options, the keys that we just set are here as well, so if we needed to change them, we can do that from either the property tab or the configure tab. There's also this label style property. Now it's set to none by default, but we can change that to simple. Simple shows the label on each wedge of the pie, whereas outset shows the label outside of the pie. The text in these labels is determined by the label format property.
[02:06] If you show the details of this property, you'll see an explanation of what exactly these numbers mean. Zero is the wedge name, or in this case, whatever the row or label key is showing us. One is the value for that row, and then two is the percentage of the overall value. So if you take a look at this in the preview tab, you can see that oranges equals 33 or 25% of this whole amount of fruit. Now let's make some changes to the text on the label. We'll go back to the design tab and select our chart and go back to the properties tab. And I have this label format already set. I'm going to paste that in. I want to say the wedge name makes up whatever percentage of all fruit. I'll confirm that by hitting enter on the keyboard and we see the labels on our chart updated. Let's take a look at our new label in the preview tab. So you can see we can put whatever text we want into those labels. Let's go back to the design tab and review the rest of our chart properties. Down a little bit further in the property inspector, you'll see that we can show or hide our legend as well as change its font from up here.
[03:11] We can also change the font for our labels as well. The style option changes how the pie chart looks visually, so we can have a 3D pie or even a ring. Next, we have this section for stroke and fill. Stroke is hidden by default, but if you change the stroke style from hidden to, we'll say double, you'll see there's a border added to our chart, and we can expand the stroke property here. We can change the color of the border, the positioning, separation, and so on. And then below these are basic properties that you see in many of the other chart components. Again, we have height, width, scale, and so on. So the pie chart component, while being useful to represent data as a label and value pair, has many customization options as well to display that data.